<template>
	<view class="top dis aic g16 jcsb">
		<view class="dis aic g16">
			<image src="/static/home.png" class="icon" mode="widthFix" @click="goHome()"></image>
			<view class="title" @click="goHome()">首页</view>
			<image src="/static/right.png" class="icon" mode="widthFix"></image>
			<view class="tips">
				{{
				type == '1'
					? '欢迎辞'
					: type == '2'
					? '组织机构'
					: type == '3'
					? '报名入口'
					: type == '4'
					? '活动风采'
					: type == '5'
					? '联系我们'
					: type == '6'
					? '华东赛区'
					: type == '7'
					? '北部赛区'
					: type == '8'
					? '中部赛区'
					: type == '9'
					? '总结决赛'
					: type == '10'
					? '华南赛区'
					: type == '11'
					? '西部赛区'
					: type == '12'
					? '赛事规则'
					: ''
			}}
			</view>
		</view>
		<image src="/static/h.png" class="icon" mode="widthFix" @click="isShow = true"></image>
		<view class="mask" v-if="isShow">
			<view class="ul pr">
				<view class="close pr ">
					<image src="/static/close.png" style="width: 32rpx;" mode="widthFix" @click="isShow = false">
					</image>
				</view>
				<view class="li pr" v-for="(item,index) in list" :key="index" @click="goDetail(item.type)">
					{{item.lable}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
			},
		},
		data() {
			return {
				isShow: false,
				list: [{
						"lable": "欢迎辞",
						"type": 1
					},
					{
						"lable": "组织机构",
						"type": 2
					},
					{
						"lable": "华东赛区",
						"type": 6
					},
					{
						"lable": "北部赛区",
						"type": 7
					},
					{
						"lable": "中部赛区",
						"type": 8
					},
					{
						"lable": "华南赛区",
						"type": 10
					},
					{
						"lable": "西部赛区",
						"type": 11
					},
					{
						"lable": "总结决赛",
						"type": 9
					},
					{
						"lable": "报名入口",
						"type": 3
					},
					{
						"lable": "活动风采",
						"type": 4
					},
					{
						"lable": "联系我们",
						"type": 5
					},
					{
						"lable": "赛事规则",
						"type": 12
					}
				]

			};
		},
		methods: {
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index',
				});
			},
			goDetail(type) {
				if (type == '3') {
					window.open('https://www.wjx.cn/vm/mBbCS3q.aspx#', '_self')
					return
				}
				uni.navigateTo({
					url: '/pages/detail/detail?type=' + type
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.top {
		position: fixed;
		top: 0;
		height: 92rpx;
		width: 750rpx;
		background: rgba(0, 0, 0, 0.25);
		padding: 0 32rpx;
		box-sizing: border-box;
		z-index: 99;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 44rpx;
		}

		.tips {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 44rpx;
		}

		.icon {
			width: 32rpx;
		}
	}

	.mask {
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;

		.ul {
			width: 328rpx;
			height: 100vh;
			position: fixed;
			right: 0;
			top: 0;

			.close {
				width: 328rpx;
				height: 92rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				left: 264rpx;
				top: 30rpx;
			}

			.li {
				width: 328rpx;
				height: 86rpx;
				line-height: 86rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 1rpx solid #F1F1F1;
				background: #FFFFFF;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}
	}
</style>